<template>
  <div class="user">
    <div class="user-nav">
      <Menu
        background-color="#00000000"
        text-color="#cccccc"
        active-text-color="#ffffff"
        :default-active="path"
        router
      >
        <MenuItem index="/user/editor">写文章</MenuItem>
      </Menu>
    </div>
    <div class="user-content">
      <router-view />
    </div>
  </div>
</template>

<script>
import { Menu, MenuItem } from "element-ui";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["path"])
  },
  components: {
    Menu,
    MenuItem
  }
};
</script>

<style scoped>
.user {
  display: flex;
}
.user-nav {
  max-width: 200px;
}
.user-content {
  flex: 1;
  margin-left: 20px;
}
.el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
</style>
